<template>
  <div>
    <div class="barwaterfall_panel" :id="main_id"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "BarWaterfall",
  props: {
    dataList: Array,
  },
  data() {
    return {
      main_id: "mian" + Math.random(),
      localDataList: this.dataList,
      dateLt: [],
      totalLt: [],
      incomeLt: [],
      expressLt: [],
    };
  },
  //监听外部参数实时更新子组件内部变量
  watch: {
    dataList: {
      handler(newValue, oldValue) {
        this.dataList = newValue;
      },
      immediate: true,
    },
  },
  mounted() {
    //页面加载完成之后要执行的操作放在这里
    if (this.dataList) {
      this.initData();
    }
  },
  methods: {
    //初始化数据
    async initData() {
      //初始化数据
      // console.log("传入数据");
      // console.log(this.localDataList);
      this.formatDataList();
    },
    //格式化数据列表分别展开为时间日期数组，购买量数组，售出量输出
    formatDataList() {
      if (!this.localDataList) {
        return;
      }
      let MyDataList = this.localDataList;
      let dateList = [];
      let totalList = [];
      let incomeList = [];
      let expressList = [];
      let totalTradeCounts = 0; //初始交易量数据为0

      //改用for循环 第一种方法
      // for(let i=0;i<MyDataList.length;i++){
      //   dateList.push(MyDataList[i].trade_date);
      //   //第二组开始
      //   //判断买入卖出谁多,数组压入也不同，构造可视化数据格式
      //   if(MyDataList[i].buy_quantity>=MyDataList[i].sell_quantity){
      //     totalList.push(totalTradeCounts);
      //     //买入大于卖出
      //     totalTradeCounts += (MyDataList[i].buy_quantity - MyDataList[i].sell_quantity);
      //     incomeList.push(MyDataList[i].buy_quantity - MyDataList[i].sell_quantity);
      //     expressList.push("-");
      //   }else{
      //     //买入小于卖出
      //     totalTradeCounts -= (MyDataList[i].sell_quantity - MyDataList[i].buy_quantity);
      //     totalList.push(totalTradeCounts);
      //     incomeList.push("-");
      //     expressList.push(MyDataList[i].sell_quantity - MyDataList[i].buy_quantity);
      //   }
      // }

      //第二种方法
      this.localDataList.forEach((item) => {
        dateList.push(item.trade_date);

        //第二组数据开始
        //判断买入卖出谁多,数组压入也不同，构造可视化数据格式
        if (item.buy_quantity >= item.sell_quantity) {
          totalList.push(totalTradeCounts);
          //买入大于卖出
          totalTradeCounts += item.buy_quantity - item.sell_quantity;
          incomeList.push(item.buy_quantity - item.sell_quantity);
          expressList.push("-");
        } else {
          //买入小于卖出
          totalTradeCounts -= item.sell_quantity - item.buy_quantity;
          totalList.push(totalTradeCounts);
          incomeList.push("-");
          expressList.push(item.sell_quantity - item.buy_quantity);
        }
      });
      //赋值给组件变量
      this.dateLt = dateList;
      console.log(dateList);
      this.totalLt = totalList;
      console.log(totalList);
      this.incomeLt = incomeList;
      console.log(incomeList);
      this.expressLt = expressList;
      console.log(expressList);
      //显示统计视图
      this.initEchart();
    },
    //初始化可视化组件
    initEchart() {
      var chartDom = document.getElementById(this.main_id);
      var myChart1 = echarts.init(chartDom);
      var _this = this;

      var option = {
        title: {
          text: "近11天大盘交易进出量数据",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            let tar;
            if (params[1] && params[1].value !== "-") {
              tar = params[1];
            } else {
              tar = params[2];
            }
            return (
              tar && tar.name + "<br/>" + tar.seriesName + " : " + tar.value
            );
          },
        },
        legend: {
          data: ["卖出", "买入"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: (function () {
            let list = _this.dateLt;
            // for (let i = 1; i <= 11; i++) {
            //   list.push("交易日" + i);
            // }
            return list;
          })(),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Placeholder",
            type: "bar",
            stack: "Total",
            silent: true,
            itemStyle: {
              borderColor: "transparent",
              color: "transparent",
            },
            emphasis: {
              itemStyle: {
                borderColor: "transparent",
                color: "transparent",
              },
            },
            //交易量（正负）
            data: _this.totalLt,
          },
          {
            name: "买入",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            //买入
            data: _this.incomeLt,
          },
          {
            name: "卖出",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
              position: "bottom",
            },
            //卖出
            data: _this.expressLt,
          },
        ],
      };
      //绘制图表
      myChart1.setOption(option);
    },
  },
};
</script>

<style scoped>
.barwaterfall_panel {
  min-width: 800px;
  max-width: 1120px;
  min-height: 600px;
  max-height: 900px;
}
</style>